<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌信息首页</title>
    <style>
        .bg{background: red}
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="新增" onclick="javascript:window.location.href = '/addBrand.jsp'"><br>
    <hr>
    <table border="1" cellspacing="0" width="1200" id="myTable" class="bg">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>

        </tr>
        <tr align="center" v-for="item in brands">
            <td>{{item.id}}</td>
            <td>{{item.brandName}}</td>
            <td>{{item.companyName}}</td>
            <td>{{item.ordered}}</td>
            <td>{{item.description}}</td>
            <td>{{item.status == 0?"禁用":"启用"}}</td>
            <!--            <%&#45;&#45;        <td><a href="#">修改</a> <a href="javascript:void(0)" @click="delBrand(item.id)">删除</a></td>&#45;&#45;%>-->
            <td><a href="javascript:void(0)" @click="updateData(item.id)">修改</a> <a href="javascript:void(0)" @click="delData(item.id)">删除</a>
            </td>
        </tr>
    </table>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                brands: []
            }
        },
        methods: {
            getData() {
                // 发送ajax请求，请求后端数据
                axios.get('http://localhost:8080/BrandServlet').then(res => {
                    this.brands = res.data
                })
            },
            delData(id) {
                let rs = window.confirm('确定要删除此条数据吗？')
                if (rs) {
                    // 发送请求
                    axios.get('http://localhost:8080/DelBrandServlet?brandId=' + id)
                        .then(res => {
                            alert(res.data.msg)
                            this.getData()
                        })
                }
            },
            updateData(id) {
                // 前端的session
                window.sessionStorage.setItem("id", id)
                window.location.href = "/updateBrand.html"
            }
        },
        mounted() {
            // 请求数据
            this.getData()
        }
    })


    //
    // function getData() {
    //     // 发送ajax请求，请求后端数据
    //     axios.get('http://localhost:8080/BrandServlet').then(function (res) {
    //
    //         // 表头数据
    //         let tableHead = '<tr><th>序号</th>\n' +
    //             '        <th>品牌名称</th>\n' +
    //             '        <th>企业名称</th>\n' +
    //             '        <th>排序</th>\n' +
    //             '        <th>品牌介绍</th>\n' +
    //             '        <th>状态</th>\n' +
    //             '        <th>操作</th></tr>'
    //
    //         // 得到数据，局部刷新
    //         let brands = res.data
    //         let tableData = tableHead
    //         for (let brand of brands){
    //             let tr = `<tr  align="center"><td>${brand.id}</td><td>${brand.brandName}</td>
    //                         <td>${brand.companyName}</td><td>${brand.ordered}</td><td>${brand.description}</td><td>${brand.status == 0?"禁用":"启用"}</td>
    //                         <td><a href="javascript:void(0)" onclick="updateData(${brand.id})">修改</a> <a href="javascript:void(0)" onclick="delData(${brand.id})">删除</a></td>
    //                         </tr>`
    //             tableData += tr
    //         }
    //         document.getElementById('myTable').innerHTML = tableData
    //     })
    // }
    //

</script>
</body>
</html>